Highcharts একটি শক্তিশালী লাইব্রেরি যা নানা ধরনের উন্নত এবং ইন্টারঅ্যাকটিভ চার্ট তৈরির জন্য বিভিন্ন কাস্টমাইজেশন অপশন সরবরাহ করে। এখানে আমরা Highcharts এর কিছু উন্নত চার্ট অপশন এবং কনফিগারেশন সম্পর্কে আলোচনা করব, যা আপনাকে আরও কাস্টমাইজড এবং ডাইনামিক চার্ট তৈরি করতে সহায়ক হবে।

1. Multi-series Chart (বহু সিরিজ চার্ট)

Highcharts একাধিক সিরিজের ডেটা একসাথে প্রদর্শন করতে সাহায্য করে। আপনি বিভিন্ন সিরিজের ডেটা একই চার্টে দেখাতে পারেন, যা তুলনামূলক বিশ্লেষণে সহায়ক।

উদাহরণ:

Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'Sales Comparison'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
  },
  yAxis: {
    title: {
      text: 'Sales Amount'
    }
  },
  series: [{
    name: '2024 Sales',
    data: [150, 200, 250, 300, 350]
  }, {
    name: '2025 Sales',
    data: [180, 230, 280, 330, 380]
  }]
});

এখানে দুটি সিরিজ (2024 Sales এবং 2025 Sales) একই চার্টে দেখানো হচ্ছে।

2. Drilldown Chart (ড্রিলডাউন চার্ট)

Drilldown চার্ট ব্যবহার করে আপনি একটি চার্টের মধ্যে একটি ইন্টারঅ্যাকটিভ ডেটা অনুসন্ধান করতে পারেন। যখন ব্যবহারকারী একটি ডেটা পয়েন্টে ক্লিক করেন, তখন একটি নতুন ডেটা বিশ্লেষণ প্রদর্শিত হয়।

উদাহরণ:

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Sales Data'
  },
  xAxis: {
    categories: ['Q1', 'Q2', 'Q3', 'Q4']
  },
  series: [{
    name: 'Total Sales',
    data: [1000, 1500, 2000, 2500],
    drilldown: 'sales-data'
  }],
  drilldown: {
    series: [{
      id: 'sales-data',
      data: [
        ['Product A', 500],
        ['Product B', 700],
        ['Product C', 800]
      ]
    }]
  }
});

এখানে Drilldown ফিচার ব্যবহার করে আপনি Q1 থেকে Q4 পর্যন্ত মোট বিক্রির পরিসংখ্যান দেখাতে পারেন এবং প্রতিটি কোয়ার্টারের বিস্তারিত ডেটা দেখা যাবে।

3. Highstock (স্টক চার্ট)

Highstock হচ্ছে একটি উন্নত Highcharts প্লাগইন যা স্টক মার্কেটের ডেটা এবং টাইম-সিরিজ ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়। এটি সময়ভিত্তিক ডেটা প্রদর্শন করার জন্য ব্যবহৃত হয়।

উদাহরণ:

Highcharts.stockChart('container', {
  rangeSelector: {
    selected: 1
  },
  title: {
    text: 'Stock Data'
  },
  series: [{
    name: 'Stock Price',
    data: [
      [1622505600000, 100],
      [1622592000000, 105],
      [1622678400000, 110],
      [1622764800000, 115]
    ],
    tooltip: {
      valueDecimals: 2
    }
  }]
});

এখানে Highstock প্লাগইন ব্যবহার করে স্টক মার্কেটের ডেটা সময়ভিত্তিক (Time-Series) প্রদর্শিত হচ্ছে।

4. Highmaps (ম্যাপভিত্তিক চার্ট)

Highmaps প্লাগইন ব্যবহার করে আপনি বিভিন্ন অঞ্চল বা দেশের মানচিত্রে ডেটা প্রদর্শন করতে পারেন। এটি অঞ্চলের ওপর ভিত্তি করে ডেটা ভিজ্যুয়ালাইজেশন করতে অত্যন্ত কার্যকর।

উদাহরণ:

Highcharts.mapChart('container', {
  chart: {
    map: 'countries/us/us-all'
  },
  title: {
    text: 'Population Distribution'
  },
  series: [{
    name: 'Population',
    data: [
      ['us-al', 100],
      ['us-ak', 200],
      ['us-az', 150]
    ],
    states: {
      hover: {
        color: '#BADA55'
      }
    },
    dataLabels: {
      enabled: true,
      format: '{point.name}'
    }
  }]
});

এখানে Highmaps ব্যবহার করে আপনি মার্কিন যুক্তরাষ্ট্রের বিভিন্ন রাজ্যের জনসংখ্যা ডেটা দেখাচ্ছেন।

5. Heatmap Chart (হিটম্যাপ চার্ট)

Heatmap চার্ট হলো একটি ডেটা ভিজ্যুয়ালাইজেশন টুল যা তাপমাত্রা বা পরিমাণের পার্থক্য প্রদর্শন করে। এটি বিশেষভাবে বড় ডেটাসেটের ভিজ্যুয়াল প্রেজেন্টেশনের জন্য উপযুক্ত।

উদাহরণ:

Highcharts.chart('container', {
  chart: {
    type: 'heatmap'
  },
  title: {
    text: 'Heatmap Chart Example'
  },
  series: [{
    name: 'Sales',
    data: [
      [0, 0, 1],
      [0, 1, 2],
      [1, 0, 3],
      [1, 1, 4]
    ],
    dataLabels: {
      enabled: true,
      color: '#000000'
    }
  }]
});

এখানে Heatmap চার্ট ব্যবহার করে আপনি ডেটার ঘনত্ব এবং পার্থক্য বিশ্লেষণ করতে পারেন।

6. Solid Gauge Chart (সোলিড গেজ চার্ট)

Solid Gauge চার্ট একটি বিশেষ ধরনের গেজ চার্ট যা সাধারণত প্যারামিটার বা পরিমাপ দেখানোর জন্য ব্যবহৃত হয়। এটি একাধিক রেঞ্জ বা মানের উপর ভিত্তি করে গেজ সিস্টেমে ডেটা প্রদর্শন করে।

উদাহরণ:

Highcharts.chart('container', {
  chart: {
    type: 'solidgauge'
  },
  title: {
    text: 'Speedometer'
  },
  series: [{
    name: 'Speed',
    data: [80],
    tooltip: {
      valueSuffix: ' km/h'
    }
  }]
});

এখানে Solid Gauge চার্ট ব্যবহার করে একটি স্পিডোমিটার প্রদর্শন করা হচ্ছে।

সারাংশ

Highcharts এর উন্নত চার্ট অপশনগুলি আপনাকে আরও ইন্টারঅ্যাকটিভ, ডাইনামিক এবং তথ্যপূর্ণ চার্ট তৈরি করতে সাহায্য করে। Multi-series, Drilldown, Highstock, Highmaps, Heatmap, এবং Solid Gauge চার্টের মতো ফিচারগুলো ব্যবহার করে আপনি বিভিন্ন ধরনের ভিজ্যুয়াল ডেটা প্রদর্শন করতে পারেন, যা আপনার ডেটা বিশ্লেষণের ক্ষমতাকে বাড়িয়ে দেয়। Highcharts এর এই অপশনগুলো আপনাকে কাস্টমাইজড এবং এডভান্সড ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়ক।

Multi-series Chart হলো একটি চার্ট যেখানে একাধিক ডেটা সিরিজ একসাথে প্রদর্শিত হয়। এটি ব্যবহৃত হয় যখন একাধিক ভিন্ন ভিন্ন ডেটা সিরিজের তুলনা করতে হয়, যেমন বিভিন্ন ক্যাটেগরির বা গ্রুপের মধ্যে তুলনা। Multi-series চার্ট সাধারণত Line Chart, Bar Chart, বা Column Chart এর রূপে তৈরি করা হয়।

Highcharts বা Angular সহ যেকোনো প্ল্যাটফর্মে Multi-series Chart তৈরি করার প্রক্রিয়া প্রায় একই। এখানে আমরা একটি সাধারণ Line Chart এর উদাহরণ দিয়ে Multi-series Chart তৈরি করার প্রক্রিয়া দেখাব।

Highcharts দিয়ে Multi-series Line Chart তৈরি করা

Highcharts একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি, যা ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়। Highcharts দিয়ে Multi-series Line Chart তৈরি করতে আপনি একাধিক ডেটা সিরিজ (series) যোগ করতে পারেন।

1. Highcharts লাইব্রেরি ইনস্টল করা

প্রথমে, Highcharts ইনস্টল করতে হবে:

npm install highcharts

2. Angular এ Highcharts ইন্টিগ্রেশন

Highcharts Angular র‍্যাপার ব্যবহার করার জন্য, আপনাকে Highcharts Angular র‍্যাপার ইনস্টল করতে হবে:

npm install highcharts-angular

এরপর, আপনার অ্যাপ মডিউলে Highcharts মডিউলটি ইমপোর্ট করতে হবে:

import { HighchartsChartModule } from 'highcharts-angular';

আপনি আপনার app.module.ts ফাইলে এটি যোগ করতে পারেন:

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HighchartsChartModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

3. Multi-series Chart তৈরি করা

এখন, আপনি app.component.ts ফাইলে একটি Multi-series Line Chart তৈরি করতে পারেন। উদাহরণস্বরূপ:

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    chart: {
      type: 'line' // Line chart type
    },
    title: {
      text: 'Multi-series Line Chart'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
      title: {
        text: 'Values'
      }
    },
    series: [
      {
        name: 'Product A',
        data: [5, 8, 3, 4, 7, 2, 9, 3, 6, 10, 4, 5]
      },
      {
        name: 'Product B',
        data: [2, 4, 5, 7, 3, 9, 2, 6, 7, 3, 5, 4]
      },
      {
        name: 'Product C',
        data: [3, 6, 2, 5, 8, 7, 3, 9, 4, 6, 3, 5]
      }
    ]
  };
}

4. HTML টেমপ্লেট

app.component.html ফাইলে Highcharts চার্টটি ডিসপ্লে করার জন্য নিচের কোড ব্যবহার করুন:

<div style="height: 400px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

ব্যাখ্যা:

• chart.type: এখানে 'line' বলা হয়েছে, কারণ আমরা একটি লাইন চার্ট তৈরি করতে চাই।
• xAxis.categories: এখানে মাসের নামগুলো দিয়ে আমরা x-অ্যাক্সিসের ক্যাটেগরি সেট করেছি।
• series: এই অংশে একাধিক সিরিজ যুক্ত করা হয়েছে। এখানে Product A, Product B, এবং Product C তিনটি সিরিজ রয়েছে, এবং প্রতিটি সিরিজের জন্য আলাদা ডেটা দেয়া হয়েছে।

সারাংশ

Highcharts ব্যবহার করে Multi-series Line Chart তৈরি করা খুবই সহজ। একাধিক ডেটা সিরিজ যোগ করে আপনি বিভিন্ন গ্রুপ বা ক্যাটেগরির মধ্যে তুলনা করতে পারেন। Angular অ্যাপ্লিকেশনে Highcharts ইন্টিগ্রেশন করে আপনি অত্যন্ত ইন্টারঅ্যাকটিভ এবং ডাইনামিক চার্ট তৈরি করতে পারবেন। Multi-series Chart বিভিন্ন সময়ে বা শর্তে ডেটার বিভিন্ন ধারার তুলনা দেখাতে কার্যকর।

Drilldown চার্ট হলো এমন একটি চার্ট যা ব্যবহারকারীকে একটি নির্দিষ্ট ডেটার বিস্তারিত দেখানোর সুযোগ দেয়। Highcharts এ Drilldown ফিচার ব্যবহার করে, আপনি একটি চার্টে ক্লিক করলে আরও ডিটেইলড ডেটা দেখতে পারবেন। এটি সাধারণত পিতামাতার তথ্য থেকে শিশু তথ্যের দিকে গভীরতা অনুসন্ধান করতে ব্যবহৃত হয়। অর্থাৎ, ব্যবহারকারী একটি নির্দিষ্ট কেটেগরি বা সেগমেন্টে ক্লিক করার মাধ্যমে আরও বিস্তারিত তথ্য দেখতে পারে।

Drilldown চার্ট কনফিগারেশন

Drilldown চার্টে একাধিক স্তর থাকতে পারে, এবং এক স্তরের ডেটা আরেক স্তরের ডেটার উপর ভিত্তি করে পরিবর্তিত হতে পারে। Drilldown এর জন্য সাধারণভাবে series এবং drilldown অপশন ব্যবহার করা হয়।

Drilldown চার্টের উদাহরণ:

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'বিক্রয় বিশ্লেষণ - Drilldown চার্ট'
  },
  subtitle: {
    text: 'ক্লিক করে বিস্তারিত দেখুন'
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    title: {
      text: 'বিক্রয় পরিমাণ'
    }
  },
  series: [{
    name: 'মাস',
    data: [{
      name: 'জানুয়ারি',
      y: 5,
      drilldown: 'jan-drilldown'
    }, {
      name: 'ফেব্রুয়ারি',
      y: 3,
      drilldown: 'feb-drilldown'
    }, {
      name: 'মার্চ',
      y: 4,
      drilldown: 'mar-drilldown'
    }]
  }],
  drilldown: {
    series: [{
      id: 'jan-drilldown',
      data: [
        ['প্রোডাক্ট A', 2],
        ['প্রোডাক্ট B', 3]
      ]
    }, {
      id: 'feb-drilldown',
      data: [
        ['প্রোডাক্ট A', 1],
        ['প্রোডাক্ট B', 2]
      ]
    }, {
      id: 'mar-drilldown',
      data: [
        ['প্রোডাক্ট A', 2],
        ['প্রোডাক্ট B', 2]
      ]
    }]
  }
});

ব্যাখ্যা

1. series:
   • name: শিরোনাম যা সিরিজের জন্য প্রদর্শিত হবে।
   • data: এটি মূল ডেটা যা চার্টে প্রদর্শিত হয়। এখানে drilldown নামে একটি কাস্টম প্রপার্টি যুক্ত করা হয়েছে, যা নির্দেশ করে যে কোন ডেটা পয়েন্টের জন্য Drilldown ফিচার কার্যকর হবে।
2. drilldown:
   • series: Drilldown ডেটা এখানে সংজ্ঞায়িত করা হয়। আপনি id ব্যবহার করে Drilldown সিরিজের জন্য একটি ইউনিক আইডি সেট করেন, যা মূল ডেটা পয়েন্টের সাথে ম্যাচ করবে।
   • id: এটি মূল ডেটা পয়েন্টের জন্য নির্ধারিত ID যা Drilldown সিরিজের সাথে যুক্ত হবে।
   • data: Drilldown ডেটা যা মূল ডেটার বিস্তারিত তথ্য হিসেবে প্রদর্শিত হবে।

Drilldown চার্টের কর্মপ্রণালী

1. যখন ব্যবহারকারী মূল চার্টে একটি নির্দিষ্ট বার বা পয়েন্টে ক্লিক করবেন, তখন drilldown ID এর সাথে সম্পর্কিত ডেটা প্রদর্শিত হবে।
2. Drilldown সিরিজের data-তে থাকা তথ্যের মাধ্যমে ব্যবহারকারী আরও বিস্তারিত দেখতে পারবেন। উদাহরণস্বরূপ, জানুয়ারি মাসের বিক্রয় তথ্যের জন্য আরও বিস্তারিত প্রোডাক্ট-বেসড তথ্য দেখা যাবে।

Drilldown এ "Back to Top" ফিচার

Highcharts এর Drilldown ফিচারে সাধারণত ডিফল্টভাবে "Back to Top" ফিচার থাকে। অর্থাৎ, আপনি যখন Drilldown থেকে পিতামাতা চার্টে ফিরে যেতে চান, তখন "Back to Top" বাটন ব্যবহার করে সহজেই মূল চার্টে ফিরে আসতে পারেন।

Drilldown চার্টের কাস্টমাইজেশন

আপনি Drilldown চার্টের সাইজ, রঙ, স্টাইল এবং আরও অনেক কিছু কাস্টমাইজ করতে পারবেন। উদাহরণস্বরূপ:

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'বিক্রয় বিশ্লেষণ'
  },
  series: [{
    name: 'মাস',
    data: [{
      name: 'জানুয়ারি',
      y: 5,
      drilldown: 'jan-drilldown'
    }, {
      name: 'ফেব্রুয়ারি',
      y: 3,
      drilldown: 'feb-drilldown'
    }]
  }],
  drilldown: {
    series: [{
      id: 'jan-drilldown',
      data: [
        ['প্রোডাক্ট A', 2],
        ['প্রোডাক্ট B', 3]
      ],
      color: '#ff0000'  // Drilldown সিরিজের রঙ কাস্টমাইজ করা
    }, {
      id: 'feb-drilldown',
      data: [
        ['প্রোডাক্ট A', 1],
        ['প্রোডাক্ট B', 2]
      ],
      color: '#00ff00'  // Drilldown সিরিজের রঙ কাস্টমাইজ করা
    }]
  }
});

এতে আপনি Drilldown সিরিজের color বা রঙ কাস্টমাইজ করে আরো আকর্ষণীয় ডিজাইন করতে পারবেন।

সারাংশ

Highcharts এর Drilldown ফিচার ব্যবহার করে আপনি ইন্টারঅ্যাকটিভ এবং ডিটেইলড ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন। এটি ব্যবহারকারীদের একটি নির্দিষ্ট ডেটা পয়েন্টে ক্লিক করে আরও বিস্তারিত ডেটা দেখতে সাহায্য করে, এবং একাধিক স্তরের তথ্য প্রদর্শন করার জন্য খুবই উপকারী। Drilldown চার্টের মাধ্যমে, আপনি জটিল ডেটাকে সহজে এবং সুন্দরভাবে উপস্থাপন করতে পারেন।

Highstock হলো Highcharts এর একটি বিশেষ সংস্করণ যা সময়ভিত্তিক (time-series) ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়। এটি মূলত স্টক মার্কেট, ফিনান্সিয়াল ডেটা, বা অন্য কোনো ডেটা যা সময়ের সাথে পরিবর্তিত হয়, সেটি প্রদর্শন করার জন্য উপযোগী। Highstock ব্যবহারের মাধ্যমে আপনি রিয়েল-টাইম ডেটা আপডেট, জুম এবং প্যানিং ফিচার সহ সময়ভিত্তিক চার্ট তৈরি করতে পারবেন।

এখানে আমরা দেখব কিভাবে Angular অ্যাপ্লিকেশনে Highstock ব্যবহার করে সময়ভিত্তিক ডেটা প্রদর্শন করা যায়।

Highstock লাইব্রেরি ইন্টিগ্রেশন

প্রথমে, আপনাকে Highcharts এবং Highstock লাইব্রেরি ইনস্টল করতে হবে, কারণ Highstock Highcharts এর ওপর ভিত্তি করে কাজ করে।

Step 1: Highstock ইনস্টল করা

আপনি npm ব্যবহার করে highcharts এবং highcharts/highstock লাইব্রেরি ইনস্টল করতে পারেন।

npm install highcharts --save
npm install highcharts-angular --save

এটি Highcharts এবং Highstock-এর প্রয়োজনীয় প্যাকেজ আপনার প্রজেক্টে ইন্সটল করবে।

Step 2: Highcharts এবং Highstock ইমপোর্ট করা

Angular প্রজেক্টে Highstock ব্যবহারের জন্য highcharts এবং highcharts-angular মডিউল ইমপোর্ট করতে হবে। app.module.ts ফাইলে HighchartsChartModule যোগ করুন।

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HighchartsChartModule } from 'highcharts-angular';  // Highcharts মডিউল ইমপোর্ট

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HighchartsChartModule  // Highcharts মডিউল ব্যবহার করা
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3: Highstock Chart কনফিগারেশন

Highstock ব্যবহার করে সময়ভিত্তিক ডেটা প্রদর্শন করতে, আপনাকে ডেটা টাইমস্ট্যাম্প সহ প্রস্তুত করতে হবে এবং Highstock এর series এ টাইমস্ট্যাম্প সহ ডেটা ইনজেক্ট করতে হবে।

1. app.component.ts ফাইলের মধ্যে Highstock চার্টের কনফিগারেশন করুন:

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts/highstock'; // Highstock ইমপোর্ট

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Highcharts = Highcharts;
  chartOptions: any;

  ngOnInit() {
    this.chartOptions = {
      chart: {
        type: 'line'
      },
      title: {
        text: 'সময়ভিত্তিক ডেটা প্রদর্শন'
      },
      rangeSelector: {
        selected: 1  // রেঞ্জ সিলেক্টর দিয়ে চার্টের সময়কাল নির্বাচন
      },
      xAxis: {
        type: 'datetime'  // টাইমস্ট্যাম্প ডেটা রেন্ডারিং
      },
      series: [{
        name: 'Stock Price',
        data: [
          [Date.UTC(2024, 0, 1), 29.9],  // ২০২৪-০১-০১ তারিখে ২৯.৯
          [Date.UTC(2024, 0, 2), 31.9],  // ২০২৪-০১-০২ তারিখে ৩১.৯
          [Date.UTC(2024, 0, 3), 35.1],  // ২০২৪-০১-০৩ তারিখে ৩৫.১
          [Date.UTC(2024, 0, 4), 40.5],  // ২০২৪-০১-০৪ তারিখে ৪০.৫
          [Date.UTC(2024, 0, 5), 42.2],  // ২০২৪-০১-০৫ তারিখে ৪২.২
          [Date.UTC(2024, 0, 6), 45.3],  // ২০২৪-০১-০৬ তারিখে ৪৫.৩
        ]
      }]
    };
  }
}

2. app.component.html ফাইলে Highcharts কম্পোনেন্ট ব্যবহার করুন:

<div style="height: 400px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

ব্যাখ্যা:

1. Date.UTC(): Highcharts টাইমস্ট্যাম্প ডেটা প্রদর্শনের জন্য Date.UTC() ফাংশন ব্যবহার করে টাইমস্ট্যাম্প তৈরি করা হয়। এটি একটি বিশেষ ফাংশন যা টাইমস্ট্যাম্প হিসাবে একটি UTC তারিখ তৈরি করে।
2. rangeSelector: rangeSelector এর মাধ্যমে আপনি চার্টে একটি সময় সীমা নির্বাচন করতে পারেন (যেমন ১ দিন, ১ সপ্তাহ, ১ মাস ইত্যাদি)। এটি ব্যবহারকারীকে চার্টের বিভিন্ন সময়কাল দেখানোর সুযোগ দেয়।
3. xAxis.type: 'datetime': xAxis এর type এ 'datetime' ব্যবহার করে আমরা নিশ্চিত করি যে x-axis তে টাইমস্ট্যাম্পের ভিত্তিতে ডেটা রেন্ডার হবে।
4. series: series এ আমাদের মূল ডেটা থাকে, যেটি একটি অ্যারে হিসেবে টাইমস্ট্যাম্প এবং ডেটা ভ্যালু ধারণ করে।

Step 4: রিয়েল-টাইম ডেটা আপডেট (Optional)

আপনি যদি রিয়েল-টাইম ডেটা হালনাগাদ করতে চান, তবে আপনি WebSocket বা API কলের মাধ্যমে নতুন ডেটা গ্রহণ করে setData() ব্যবহার করে চার্ট আপডেট করতে পারেন।

সারাংশ

Highstock ব্যবহার করে আপনি সহজেই সময়ভিত্তিক ডেটা ভিজ্যুয়ালাইজ করতে পারেন। টাইমস্ট্যাম্প ডেটা ইনজেক্ট করার মাধ্যমে আপনি স্টক মার্কেট, ফিনান্সিয়াল ডেটা অথবা সেন্সর ডেটা প্রদর্শন করতে পারেন। Highstock আপনাকে zooming, panning, range selection এবং real-time updates সহ আরও অনেক সুবিধা প্রদান করে।

Highmaps হলো Highcharts এর একটি বিশেষ সংস্করণ যা ম্যাপভিত্তিক ডেটা ভিজ্যুয়ালাইজেশন করতে ব্যবহৃত হয়। Highmaps লাইব্রেরির সাহায্যে আপনি বিভিন্ন ধরনের ম্যাপ (বিশ্বমানচিত্র, দেশভিত্তিক মানচিত্র, বা কাস্টম অঞ্চলের ম্যাপ) তৈরি করতে পারেন এবং সেই অনুযায়ী ডেটা প্রদর্শন করতে পারেন।

এখানে আমরা দেখব কিভাবে Angular অ্যাপ্লিকেশনে Highmaps ব্যবহার করে ম্যাপভিত্তিক চার্ট তৈরি করা যায়।

Highmaps ইনস্টলেশন

প্রথমে, Highmaps এবং Highcharts লাইব্রেরি ইনস্টল করতে হবে।

1. Highcharts ইনস্টল করুন:

npm install highcharts --save

2. Highmaps ইনস্টল করুন:

Highmaps লাইব্রেরি Highcharts এর একটি প্লাগইন হিসেবে কাজ করে, তাই আপনাকে highcharts এবং highmaps একসাথে ইনস্টল করতে হবে।

npm install highcharts highcharts-more --save

Highmaps সেটআপ এবং কনফিগারেশন

Highmaps এর জন্য Angular কম্পোনেন্ট তৈরি করার আগে, আপনাকে Highcharts এবং Highmaps মডিউল ইমপোর্ট করতে হবে এবং কনফিগারেশন তৈরি করতে হবে।

1. app.module.ts ফাইলে Highmaps মডিউল ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

// Highcharts এবং Highmaps র‍্যাপার ইমপোর্ট করা
import { HighchartsChartModule } from 'highcharts-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HighchartsChartModule  // HighchartsChartModule যোগ করা
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. app.component.ts ফাইলে Highmaps কনফিগারেশন তৈরি করুন:

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import mapData from '@highcharts/map-collection/custom/world.geo.json'; // বিশ্ব মানচিত্রের ডেটা

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Highcharts = Highcharts;  // Highcharts ব্যবহার করার জন্য
  chartOptions: any;  // চার্টের অপশন স্টোর করার জন্য

  ngOnInit() {
    // Highmaps কনফিগারেশন সেটআপ করা
    this.chartOptions = {
      chart: {
        map: mapData // ম্যাপ ডেটা সংযুক্ত করা
      },
      title: {
        text: 'বিশ্বমানচিত্র'
      },
      mapNavigation: {
        enabled: true, // ম্যাপ জুম এবং প্যান ফিচার
        buttonOptions: {
          verticalAlign: 'bottom'
        }
      },
      colorAxis: {
        min: 0,
        max: 100,
        stops: [
          [0, '#ffcccc'],
          [0.5, '#ffff99'],
          [1, '#99ff99']
        ]
      },
      series: [{
        name: 'Population Density',
        data: [
          ['US', 80],
          ['GB', 50],
          ['IN', 150],
          ['CN', 100],
          ['AU', 20]
        ],  // দেশভিত্তিক ডেটা
        joinBy: 'iso-a2', // দেশ কোডের মাধ্যমে ডেটা যোগ করা
        tooltip: {
          pointFormat: '{point.name}: {point.value}'
        }
      }]
    };
  }
}

3. app.component.html ফাইলে Highmaps চার্ট যুক্ত করুন:

<div style="height: 600px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

ব্যাখ্যা:

1. mapData: Highmaps এর জন্য মানচিত্রের ডেটা প্রয়োজন হয়। এখানে আমরা world.geo.json ফাইল ব্যবহার করেছি, যা পৃথিবীর মানচিত্রের জিওJSON ডেটা প্রদান করে। আপনি অন্যান্য দেশভিত্তিক বা কাস্টম মানচিত্রও ব্যবহার করতে পারেন।
2. mapNavigation: enabled: true দিয়ে ম্যাপের zoom এবং pan ফিচার সক্রিয় করা হয়েছে, যাতে ব্যবহারকারী ম্যাপটিকে জুম ইন এবং আউট করতে পারে এবং প্যান করতে পারে।
3. colorAxis: ম্যাপের প্রতিটি দেশের জন্য রঙ নির্ধারণ করা হয়েছে, যেখানে min এবং max মানের ভিত্তিতে রঙ পরিবর্তন হবে। এই রঙের মান Population Density এর উপর ভিত্তি করে নির্ধারণ করা হয়েছে।
4. series: এখানে আমরা Population Density এর জন্য ডেটা প্রদান করেছি, যেখানে দেশগুলোর জন্য মান (value) নির্ধারণ করা হয়েছে। joinBy: 'iso-a2' ব্যবহার করা হয়েছে, যা Highmaps কে নিশ্চিত করে যে ডেটা দেশ কোডের (ISO 3166-1 alpha-2) মাধ্যমে যুক্ত হবে।

সারাংশ

Highmaps ব্যবহার করে আপনি ম্যাপভিত্তিক চার্ট খুব সহজেই তৈরি করতে পারেন। Angular এবং Highcharts এর মাধ্যমে Highmaps লাইব্রেরি ইন্টিগ্রেট করার পর, আপনি পৃথিবী, দেশ, অথবা কাস্টম ম্যাপের উপর ভিত্তি করে ডেটা প্রদর্শন করতে পারবেন। ম্যাপের জুম, প্যান, এবং রঙ কাস্টমাইজেশনের মাধ্যমে আরও ইন্টারঅ্যাকটিভ ভিজ্যুয়াল তৈরি করা সম্ভব। Highmaps ব্যবহার করে আপনার অ্যাপ্লিকেশনে ম্যাপভিত্তিক ডেটা ভিজ্যুয়ালাইজেশন উপস্থাপন করা সহজ এবং কার্যকর।